<template>
  <el-dialog title="返修报工单详情" v-if="infoOpen" :visible.sync="infoOpen" width="960px" append-to-body>
    <div id="printArea">
      <div class="product-audit" v-if="proFeedback.isCheck == 'Y' && tabIndex == 1 && qcIpqc.ipqcId != null">
        <el-row class="task-content">
          <el-col :span="4" class="row-name">{{ qcIpqc.ipqcName }}</el-col>
          <el-col :span="12" style="margin-left: 10px">{{ qcIpqc.ipqcCode }}</el-col>
        </el-row>
        <el-descriptions :column="2" class="is-bordered" style="margin-bottom: 10px; margin-top: 20px" border>
          <el-descriptions-item label="创建人：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
            {{ qcIpqc.createBy }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
            {{ qcIpqc.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="img-right" v-if="proFeedback.isCheck == 'Y' && qcIpqc.ipqcId != null && qcIpqc.checkResult == 'ACCEPT'">
          <img class="svg-img" src="@/assets/images/accept.png" alt="yes" />
        </div>
        <div class="img-right" v-else>
          <img class="svg-img" src="@/assets/images/reject.png" alt="yes" />
        </div>
        <div class="info noprint">
          <el-button type="primary" size="mini" @click="print">打印</el-button>
        </div>
      </div>
      <div class="product-audit" v-else>
        <el-row class="task-content">
          <el-col :span="4" class="row-name">{{ proFeedback.nickName }}</el-col>
          <el-col :span="12" style="margin-left: 10px"></el-col>
        </el-row>
        <el-descriptions :column="2" class="is-bordered" style="margin-bottom: 10px; margin-top: 20px" border>
          <el-descriptions-item label="创建人：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
            {{ proFeedback.createBy }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
            {{ proFeedback.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="img-right">
          <!--          <img v-if="proFeedback.isCheck == 'Y' && qcIpqc.ipqcId == null" class="svg-img" src="@/assets/images/yes.svg" alt="no" />-->
        </div>
        <div class="info noprint">
          <el-button type="primary" size="mini" @click="print">打印</el-button>
        </div>
      </div>
      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <!--        报工信息-->
            <div class="work-info">
              <div class="divider">
                <span class="label">报工信息</span>
              </div>

              <el-descriptions :column="2" style="margin-top: 40px" border>
                <el-descriptions-item label="报工人员" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proFeedback.nickName }}
                </el-descriptions-item>
                <el-descriptions-item label="报工数量" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  <el-tag type="success">
                    {{ proFeedback.quantityFeedback }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="报工时间" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proFeedback.feedbackTime }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <!--        任务信息-->
            <div class="work-info">
              <div class="divider">
                <span class="label">任务信息</span>
              </div>
              <el-descriptions :column="2" style="margin-top: 40px" border :label-style="label_style" :contentStyle="content_style">
                <el-descriptions-item label="任务编号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proTask.rrTaskCode }}
                </el-descriptions-item>
                <el-descriptions-item label="任务名称" :width="150" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proTask.rrTaskName }}
                </el-descriptions-item>
                <el-descriptions-item label="工作站名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proTask.workstationName }}
                </el-descriptions-item>
                <el-descriptions-item label="工序名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proTask.processName }}
                </el-descriptions-item>
                <el-descriptions-item label="工序编号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proTask.processCode }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <!--        工单信息-->
            <div class="work-info">
              <div class="divider">
                <span class="label">工单信息</span>
              </div>
              <el-descriptions :column="2" style="margin-top: 40px" border>
                <el-descriptions-item label="工单编号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proWorkorder.repairCode }}
                </el-descriptions-item>
                <el-descriptions-item label="产品名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proWorkorder.itemName }}
                </el-descriptions-item>
                <el-descriptions-item label="产品编码" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proWorkorder.itemCode }}
                </el-descriptions-item>
                <el-descriptions-item label="规格型号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proWorkorder.specification }}
                </el-descriptions-item>
                <el-descriptions-item label="单位" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ proWorkorder.unitOfMeasure }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="质检内容" name="second" v-if="proFeedback.isCheck == 'Y' && qcIpqc.ipqcId != null">
            <div class="work-info">
              <div class="divider">
                <span class="label">检验单信息</span>
              </div>
              <el-descriptions :column="2" style="margin-top: 40px" border>
                <el-descriptions-item label="检验单名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.ipqcName }}
                </el-descriptions-item>
                <el-descriptions-item label="检验单编号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.ipqcCode }}
                </el-descriptions-item>
                <el-descriptions-item label="检验类型" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.ipqcType }}
                </el-descriptions-item>
                <el-descriptions-item label="检验日期" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.inspectDate }}
                </el-descriptions-item>
                <el-descriptions-item label="检验人" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.inspector }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="work-info" v-if="qcIpqc.ipqcId != null && qcDefectRecordList.length > 0">
              <div class="divider">
                <span class="label">检验项目</span>
              </div>

              <div class="info-container">
                <el-card shadow="always" v-if="qcIpqc.ipqcId != null" class="box-card">
                  <IpqcSelect ref="line" :ipqcId="qcIpqc.ipqcId" :optType="optType"></IpqcSelect>
                </el-card>
              </div>
            </div>
            <div class="work-info">
              <div class="divider">
                <span class="label">检验结果</span>
              </div>

              <el-descriptions :column="2" style="margin-top: 40px" border>
                <el-descriptions-item label="合格数量" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.quantityQualified }}
                </el-descriptions-item>
                <el-descriptions-item label="不合格数量" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.quantityUnqualified }}
                </el-descriptions-item>
                <el-descriptions-item label="合格率" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ ((qcIpqc.quantityQualified / (qcIpqc.quantityCheck + qcIpqc.quantityUnqualified)) * 100).toFixed(2) }}%
                </el-descriptions-item>
                <el-descriptions-item label="检测结果" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.checkResult == 'ACCEPT' ? '检验通过' : '检验不通过' }}
                </el-descriptions-item>
                <el-descriptions-item label="备注" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                  {{ qcIpqc.remark }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="infoOpen = false">返 回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getFeedbackInfo } from '@/api/mes/rr/rrfeedback'
import IpqcSelect from '@/components/ipqcSelect/single.vue'
import printJS from 'print-js'
import ItemSelectLine from '@/views/mes/pro/task/itemSelectLine.vue'
import Rtissueline from '@/views/mes/pro/task/rtIssueLine.vue'

export default {
  components: { Rtissueline, ItemSelectLine, IpqcSelect, printJS },
  data() {
    return {
      label_style: {
        'text-align': 'center', //文本居中
        'font-weight': '600',
        height: '60px',
        width: '30%',
        'word-break': 'keep-all'
      },
      content_style: {
        'text-align': 'center',
        'min-width': '200px',
        'word-break': 'break-all' //过长时自动换行
      },
      infoOpen: false,
      recordId: undefined,
      activeName: 'first',
      tabIndex: 0,
      proFeedback: {},
      proWorkorder: {},
      proTask: {},
      qcIpqc: {},
      mdWorkstationWorker: {},
      qcDefectRecordList: [],
      optType: 'IPQC'
    }
  },
  methods: {
    print() {
      printJS({
        type: 'html',
        printable: 'printArea',
        documentTitle: '生产报工单',
        header: '生产报工单',
        // 写入自定义样式
        headerStyle: 'text-align:center;width:100%;margin-top:50px;font-weight: 300;',
        style: `@page{ margin: 250cm 1cm 0cm 1cm; }
                            @media print{@page {size:landscape}}
                            .divider {
                              display: flex; /* 使用Flexbox布局 */
                              align-items: center; /* 垂直居中对齐 */
                              margin: 20px 0; /* 上下外边距 */
                            }

                            .divider::before,
                            .divider::after {
                              content: ""; /* 伪元素内容为空 */
                              flex: 1; /* 伸展占据剩余空间 */
                              border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
                            }
                            .label {
                              display: flex;
                              padding: 10px 10px !important;
                              border: 1px solid #d3d3d3; /* 蓝色边框 */
                              border-radius: 10px; /* 圆角 */
                              background-color: #fff; /* 白色背景 */
                              color: #1b9aee; /* 蓝色字体 */
                              font-family: "苹方 常规", "苹方", sans-serif;
                              font-weight: 700;
                              font-style: normal;
                              font-size: 24px;
                              text-align: center;
                              line-height: 20px;
                            }

                            .product-audit {
                              height: 100px !important;
                              margin: 10px 20px 5px 20px !important;
                            }
                            .nav-bar{
                              width: 1500px !important;
                            }
                            .creator{
                              width: 120px !important;
                            }

                            .create-time{
                              width: 250px !important;
                            }

                            .noprint{
                              display:none !important;
                            }`,
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1920
      })
    },
    init(recordId) {
      getFeedbackInfo(recordId).then((response) => {
        this.proFeedback = response.data.proFeedback || this.proFeedback
        this.proWorkorder = response.data.proWorkorder || this.proWorkorder
        this.proTask = response.data.proTask || this.proTask
        this.qcIpqc = response.data.qcIpqc || this.qcIpqc
        this.mdWorkstationWorker = response.data.mdWorkstationWorker || this.mdWorkstationWorker
        this.qcDefectRecordList = response.data.qcDefectRecordList || this.qcDefectRecordList
        this.infoOpen = true
        this.activeName = 'first'
        this.tabIndex = 0
      })
    },
    handleClick(tab, event) {
      this.tabIndex = tab.index
    }
  }
}
</script>

<style scoped>
.divider {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 20px 0; /* 上下外边距 */
}

.divider::before,
.divider::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
}

.label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #d3d3d3; /* 蓝色边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.product-audit {
  height: 130px;
  margin: -30px 20px 5px 20px;
}

.header {
  float: left;
  display: flex;
  justify-content: flex-start; /* 子元素靠左对齐 */
  padding: 10px 10px 0px 10px;
  align-items: baseline;
}

.title-name {
  font-size: 18px;
  font-weight: bold;
  width: 200px;
  height: 25px;
}

.number {
  margin-left: 10px;
  color: #8c8c8c;
  width: 200px;
}

.info {
  float: left;
  margin-bottom: 10px;
  width: 700px;
}

.nav-bar {
  display: flex;
  justify-content: flex-start; /* 子元素靠左对齐 */
  padding: 10px;
}

.create {
  margin-right: 15px; /* 设置子元素之间的间距为15px */
}

.work-info {
  margin: 20px;
}

.info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-item {
  width: 40%; /* Adjust width as needed */
  margin-bottom: 10px;
}

.info-item span {
  margin-left: 10px;
}

.info-item span:first-child {
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 20px;
  display: inline-block;
  width: 90px;
}

.content {
  color: #8c8c8c;
  text-align: left;
}

.svg-img {
  margin-top: -30px;
}

.img-right {
  float: right;
  width: 80px;
  margin-top: -60px;
}

.row-name {
  width: 24.666667%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-info {
  margin: 20px;
}

.divider {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 20px 0; /* 上下外边距 */
}

.divider::before,
.divider::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
}

.label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #d3d3d3; /* 蓝色边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.el-descriptions .is-bordered {
  table-layout: fixed !important;
}

.task-content {
  margin-top: -15px;
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #262626;
  text-align: left;
  line-height: 20px;
}

/* 假设所有 label 的最大宽度为 120px */
.el-descriptions-item__label {
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* 为内容部分设置适当的样式，保持与 label 的垂直对齐 */
.el-descriptions-item__content {
  /* 根据需要调整样式 */
}

/* 使用 Flexbox 布局来控制对齐（可选） */
.el-descriptions-item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
</style>
